<template>
  <div class="login-app">
	<!-- 模糊背景图 -->
	<div class="filter"></div>
	<!-- 版心 -->
	<div class="container">
		<!-- A -->
		<div class="spoken">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>忘记密码</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- B -->
		<div class="steps">
			<el-steps :active="finshied" simple>
			  <el-step title="账号确认" icon="el-icon-s-custom"></el-step>
			  <el-step title="找回方式" icon="el-icon-s-promotion"></el-step>
			  <el-step title="重置密码" icon="el-icon-refresh-right"></el-step>
			</el-steps>
		</div>
		<!-- C | formData -->
		<div class="C">
			<div class="formData">
				<span class="formDataTitle">①账号确认</span>
				<el-form :model="settingForm" ref="settingForm" :rules="rules">
				<el-form-item prop="account">
					<div class="a" style="display: flex;flex-direction:row;">
						<el-input v-model="settingForm.account" autocomplete="off" placeholder="请输入用户名 / 账号 / 手机号" prefix-icon="el-icon-s-custom" clearable></el-input>
						<i v-if="showLoading" :class="loadIcon" style="font-size: 40px;"></i>
					</div>
				<el-form-item v-if="finshied === 1" style="margin-top:12px;">
					<el-button v-if="next === '下一步'" type="primary" @click="submitForm" :disabled="disabled"><span style="font-size: 14px;">{{ next }}</span></el-button>
					<el-button v-else @click="refresh" :disabled="disabled" type="danger" plain icon="el-icon-refresh"><span style="font-size: 14px;">{{ next }}</span></el-button>
				</el-form-item>
				</el-form-item>
				<div class="head" v-show="finshied === 2 || finshied === 3">
					<span class="formDataTitle">②找回方式</span>
					<div class="aa" style="display: flex;">
						<el-select v-model="lookForWays" placeholder="请选择">
						    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
						<div v-if="lookForWays == '短信验证'">
							<el-form :model="settingForm" status-icon :rules="rules" class="demo-ruleForm">
							  <el-form-item prop="phoneNumber">
							    <el-input placeholder="请输入手机号" v-model="settingForm.phoneNumber" @blur="checkedTel"></el-input>
							  </el-form-item>
							</el-form>
							
						</div>
					</div>
					<el-form-item v-show="finshied === 2" style="margin-top:12px;">
						<el-button v-if="next === '下一步'" type="primary" @click="nextStep" :disabled="disabled"><span style="font-size: 14px;">{{ next }}</span></el-button>
						<el-button v-else @click="refresh" :disabled="disabled" type="danger" plain icon="el-icon-refresh"><span style="font-size: 14px;">{{ next }}</span></el-button>
					</el-form-item>
				</div>
				<div class="last" v-show="finshied === 3" style="margin-top:12px;">
					<span class="formDataTitle">③重置您的密码</span>
					<div class="aa" style="display: flex;">
						<el-input placeholder="请输入您的新密码" v-model="newPwd"></el-input>
					</div>
					<el-form-item style="margin-top:12px;">
						<el-button v-if="next === '完成'" type="primary" @click="nextStep" :disabled="disabled"><span style="font-size: 14px;">{{ next }}</span></el-button>
						<el-button v-else @click="refresh" :disabled="disabled" type="danger" plain icon="el-icon-refresh"><span style="font-size: 14px;">{{ next }}</span></el-button>
					</el-form-item>
				</div>
				</el-form>
			</div>
		</div>
	</div>
	
  </div>
</template>

<script>
// import { login, deleteUser , insertUser } from "../../api/user.js";
export default {
	components:{
		
	},
	
  data() {
	// 手机号验证
	var checkPhone = (rule, value, callback) => {
		if (!value) {
		  return callback(new Error('手机号不能为空'));
		} else {
		  const reg = /^1[3456789]\d{9}$/
		  if (reg.test(value)) {
			callback();
		  } else {
			return callback(new Error('手机号格式不正确！'));
		  }
		}
	};
    return {
	  activeName: 'first',
	  YzmText:'获取验证码',
	  next:'下一步',
	  telphone:'',
	  newPwd:'',// 新密码
      count: '', //倒计时
      timer: null, // 定时器
      seconds: 30, // 30秒 // 倒计时
	  loadIcon: 'el-icon-loading', //校检图标
	  finshied: 1,
      showLoading: false,
	  loading: false,
	  disabled: false,// 是否正在倒计时
      centerDialogVisible: false,
      //判断登录时长
      timeOut: "",
      checkList: [],
	  options: [ {value: '短信验证',label: '短信验证'}, {value: '账号申诉',label: '账号申诉',disabled: true}],
	  lookForWays: '',
      //表单数据
      settingForm: {
        account: "",
        userName: "",
		phoneNumber: "",
      },
	  testUsersGroup: [
		{ id:1,account:'admin',userName:'admin',telPhone:'123'},{ id:2,account:'九阵zpd',userName:'张培东',telPhone:'18483115507'},
		{ id:3,account:'九阵gyh',userName:'古沿宏',telPhone:'19989909347'},{ id:4,account:'九阵yy',userName:'杨勇',telPhone:'18783139022'},
	  ],
      //表单验证规则
      rules: {
        //账号
        account: [
          { required: true, message: "请输入：用户名 或 账号 或 手机号码！", trigger: "blur" },
          { min: 2, max: 16, message: "长度在2到16个字符", trigger: "blur" },
        ],
		//手机号
		phoneNumber: [
		  { required: true, message: "手机号格式不正确！", trigger: "blur" },
		  { validator: checkPhone, trigger: 'blur'}
		],
      },
	  
    };
  },
  
  created() {
   
  },
  methods: {
	// 提交
	submitForm() {
	  //触发验证表单
	  this.$refs.settingForm.validate(async(valid) => {
	    if (valid) {
	      // 开启计时器并验证
		  this.disabled = true;
		  this.showLoading = true;
		  this.loading = true;
		  let res = this.testUsersGroup.some(item => {
			return item.account == this.settingForm.account || item.userName == this.settingForm.account || item.telPhone == this.settingForm.account
		  })
		  console.log(res);
		  setTimeout(() => {
			if(res === true){
				this.finshied += 1;
				this.loadIcon = 'el-icon-passed';
			}else{
				this.next = '重试'
				this.finshied = 1;
				this.disabled = false;
				this.loadIcon = 'el-icon-unpassed';
			}
		  }, 1888)
		 
	      //验证通过
	
	    } else {
	      //验证失败
	      console.log("失败");
	    }
	  });
	},
	// 下一步 | 2
	nextStep(){
		this.finshied += 1;
		console.log(this.finshied);
		if(this.finshied == 3){
			this.next = '完成'
		}
	},
	checkedTel(){
		if(this.settingForm.phoneNumber.length == 11){
			console.log(this.settingForm.phoneNumber);
			this.disabled = false;
		} 
		
	},
	// 重试 | 清空表单
	refresh(){
		this.loadIcon = '';
		this.next = '下一步';
		this.$refs.settingForm.resetFields();
	},
	
  },
  mounted(){
    
  }
};
</script>

<style lang="less" scoped>
.login-app {
  width: 100%;
  height: 100%;
  // bgImage
  .filter {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(4px);
    align-items: center;
    background-color: var(--white);
    background: url("../../assets/images/loginLogo.png");
    /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
    /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    height: 100vh;
    place-items: center;
  }
  // 版心
  .container{
	width: 888px;
	height: 100%;
	position: fixed;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	// A
	.spoken{
		display: flex;
		padding: 20px;
		border-bottom: 2px solid #f1f1f1;
		span{
			margin-top: 18px;
			font-size: 20px;
			font-weight: bold;
			color: red;
			font-family: 'Microsoft JhengHei'; /* 使用Open Sans或备用字体 */
		}
	}
	// B
	.steps{
		opacity: .6;
		// 穿透
		/deep/ .el-step__title.is-wait{
			color: #000;
			font-weight: bold;
		}
		/deep/ .el-step__title.is-finish{
			font-weight: bold;
		}
	}
	// C
	.C{
		width: 488px;
		.formData{
				margin-top: 18px;
				.formDataTitle{
					display: inline-block;
					height: 40px;
					line-height: 40px;
					font-size: 18px;
					font-weight: bold;
				}
		}
	}
	
  }

}

</style>
